<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<link rel="stylesheet" href="../css/element.css">
		<script src="../js/element.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/qs.min.js"></script>
		<style>
			#app {
				width: 500px;
				height: 300px;
				position: absolute;
				margin-left: 27%;
				margin-top: 15%;
			}

			#app input {
				width: 100%;
				line-height: 50px;
			}

			body {
				background-color: #9de1df;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-form :model="UserInfo" status-icon ref="UserInfo" label-width="100px" class="demo-ruleForm">
				<el-form-item prop="userName">
					<el-input prefix-icon="el-icon-user-solid" type="text" v-model="UserInfo.userName"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="userPwd">
					<el-input prefix-icon="el-icon-s-goods" type="password" v-model="UserInfo.userPwd"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="margin-left: 0;" type="primary" @click="register()">注册</el-button>
					<el-button style="margin-left: 50;" type="primary" @click="login()">登录</el-button>
					<el-button style="margin-left: 300;" @click="resetForm('UserInfo')">重置</el-button>
				</el-form-item>
				
			</el-form>

			<el-dialog title="人员信息" :visible.sync="dialogFormVisible">
				<el-form :model="RegisterInfo">
				  <el-form-item label="用户名" :label-width="formLabelWidth">
					<el-input v-model="RegisterInfo.userName" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item label="密码" :label-width="formLabelWidth">
					<el-input type="password" v-model="RegisterInfo.userPwd" autocomplete="off"></el-input>
				  </el-form-item>	
				  <el-form-item label="电话" :label-width="formLabelWidth">
					  <el-input v-model="RegisterInfo.userTle" autocomplete="off"></el-input>
					</el-form-item>		   
				</el-form>
				<div slot="footer" class="dialog-footer">
				  <el-button @click="dialogFormVisible = false">取 消</el-button>
				  <el-button type="primary" @click="saveUserInfo()">确 定</el-button>
				</div>
			  </el-dialog>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				UserInfo: {
					userName: "",
					userPwd: ""
				},
				RegisterInfo:{
					userId:"",
					userName:"",
					userPwd:"",
					userIsdelete:0,
					userRole:0,
					userImgsrc:"",
					userTle:""
				},
				formLabelWidth: '120px',
				dialogFormVisible: false
			},
			methods: {
				login: function() {
				axios.post(
  					"http://localhost:8989/login",
 					 Qs.stringify(this.UserInfo),
  					{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
					).then(function(response) {
						 if(response.data=="ok"){
							window.location.href="welcome.html"
							
						}else if(response.data=="super_user")
						{
							window.location.href="super_user.html"
						}
						else{
							alert("请正确输入 用户名或密码")
						} }).catch(function(err) {
					});
				},
				resetForm(formName) {
			 	this.$refs[formName].resetFields();
				},
				register : function(){
				this.dialogFormVisible=true
				},
				saveUserInfo: function() {
				var that = this
				axios.post(
  					"http://localhost:8989/register",
 					 Qs.stringify(this.RegisterInfo),
  					{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
					).then(function(response) {
						 if(response.data=="ok"){	
							that.dialogFormVisible=false
							that.$message({
            		message: '注册成功！',
            		type: 'success',
            		duration: 2000  
        			})
						} }).catch(function(err) {
					});
				},
			}
		})
	</script>
</html>